<template>
  <el-card class="monitor-card" :class="{ 'animate-pulse': loading }">
    <template #header>
      <div class="flex justify-between items-center">
        <span class="text-lg font-bold">磁盘状态</span>
        <span class="text-sm text-gray-500">
          共 {{ data.length }} 个分区
        </span>
      </div>
    </template>
    
    <el-skeleton :loading="loading" animated :rows="5">
      <template #default>
        <el-table 
          :data="data"
          size="small"
          class="disk-table"
          :row-class-name="getRowClassName"
        >
          <el-table-column prop="dirName" label="挂载点">
            <template #default="{ row }">
              <div class="flex items-center">
                <el-tooltip :content="row.mountPoint">
                  <span class="truncate max-w-[100px]">{{ row.dirName }}</span>
                </el-tooltip>
                <el-tag v-if="!row.usable" type="danger" size="small" class="ml-2">
                  不可用
                </el-tag>
              </div>
            </template>
          </el-table-column>
          
          <el-table-column label="使用率" >
            <template #default="{ row }">
              <div class="flex items-center">
                <el-progress 
                  :percentage="row.usage" 
                  :color="getDiskColor(row.usage)"
                  :stroke-width="12"
                  :show-text="false"
                  class="flex-1"
                />
                <span class="ml-2 w-10">{{ row.usage.toFixed(1) }}%</span>
              </div>
            </template>
          </el-table-column>
          
          <el-table-column label="空间">
            <template #default="{ row }">
              <div class="text-xs">
                {{ formatBytes(row.used) }}/{{ formatBytes(row.total) }}
              </div>
              <div class="text-xs text-gray-500">
                空闲: {{ formatBytes(row.free) }}
              </div>
            </template>
          </el-table-column>
          
          <el-table-column label="IO">
            <template #default="{ row }">
              <div class="text-xs">
                读: {{ formatBytes(row.readBytes) }}/s
              </div>
              <div class="text-xs">
                写: {{ formatBytes(row.writeBytes) }}/s
              </div>
            </template>
          </el-table-column>
          
          <el-table-column label="类型">
            <template #default="{ row }">
              <el-tag size="small">{{ row.typeName }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-skeleton>
  </el-card>
</template>

<script setup lang="ts">
import type { GetSysFileInfoRes } from '@/api/monitor/types';

defineProps<{
  data: GetSysFileInfoRes[];
  loading: boolean;
}>();

// 字节格式化
const formatBytes = (bytes: number): string => {
  if (bytes <= 0) return '0 B';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + sizes[i];
};

// 磁盘使用率颜色
const getDiskColor = (usage: number) => {
  return usage > 90 ? '#f56c6c' : usage > 80 ? '#e6a23c' : '#67c23a';
};

// 行样式
const getRowClassName = ({ row }: { row: GetSysFileInfoRes }) => {
  return row.usage > 90 ? 'warning-row' : '';
};
</script>

<style lang="scss" scoped>
.disk-table {
  :deep(.el-table__row.warning-row) {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
  }
}
</style>